/**
* Created by tanyichao on 2017/3/17.
*/
<template>
    <div class="page_container routerContent" id="xstore-page">
        <nav>
            <span></span>
            <span>品质配餐</span>
            <span @click="chooseStoreStatus(true)">选择门店</span>
        </nav>

            <div class="storeDetail">
                <!-- <div class="storeHead" @click="goviewcom()">
                    <img :src="men_img | urlFilterAddServer" alt="" class="stHeadImg">
                    <div class="stRight">
                        <div class="name">
                            <div>门店</div>
                            <div>..</div>
                            <div>{{stStoreName}}</div>
                        </div>
                        <p class="stDesc">
                            {{stStoreIntroduction}}
                        </p>
                        <a :href="stStorePhone" v-on:click.stop class="stTel">联系商家</a>
                    </div>
                    <div v-if="strategies.length>0" class="delprice" @click.stop="actsfn"><span class="delicon">减</span>{{strategies[0].strategyContent}}</div>
                    <div v-if="strategies.length>0" class="activitynum" @click.stop="actsfn">{{strategies.length}}个活动></div>
                </div> -->

                <!-- John modify -->
                <div class="storeHead" @click="goviewcom()" v-show=" stStoreName != '' ">
                    <img :src="men_img | urlFilterAddServer" alt="" class="stHeadImg">
                    <div class="stRight">
                        <div class="name">
                            <div>门店</div>
                            <div>..</div>
                            <div>{{stStoreName}}</div>
                        </div>
                        <p class="stDesc">
                            {{stStoreIntroduction}}
                        </p>
                        <a :href="stStorePhone" v-on:click.stop class="stTel">联系商家</a>
                    </div>
                    <div v-if="strategies.length>0" class="delprice" @click.stop="actsfn"><span class="delicon">减</span>{{strategies[0].strategyContent}}</div>
                    <div v-if="strategies.length>0" class="activitynum" @click.stop="actsfn">{{strategies.length}}个活动></div>
                </div>
                <!-- John modify -->

                <div v-if="doBus && Me_nu.length > 0" class="menuBox" :class="{menubox: strategies.length>0}" >
                    <div class="selectMenu">
                        <scroller lock-x ref="scroller" height="100%">
                            <div>
                                <ul>
                                    <li :liIndex="index" class="leftli" v-for="(menu,index) in Me_nu" @click="selectMenu($event,index)" :class="{selectMenu_active:currentIndex== index}" :menuID="menu.menuId" :menuName="menu.menuName" :style="{ 'border-bottom': (currentIndex-1 == index) ?  'none !important' : '1px dashed #ccc'}">{{menu.menuName}}</li>
                                </ul>
                            </div>
                        </scroller>
                    </div>
                    <div class="stMenu" id="wrapper">
                        <ul class="scoTop">
                            <li v-for="(menu,index) in Me_nu" class="food-list">
                                <p class="menuHead">
                                    {{menu.menuName}} ({{menu.packages.length}})
                                </p>
                                <ul class="foodul">
                                    <li v-for="item in menu.packages " @click="goStoreDetail(item)">
                                        <img :src="item.packageImg | urlFilterAddServer" alt="" class="menuImg">
                                        <div class="menuRight">
                                            <p>{{item.packageName}}</p>
                                            <p v-if="item.price != item.originalPrice && item.price != '' && item.price != null ">现价: <span class="newPrice">¥{{item.price}} </span> </p>
                                            <p v-if="item.price != item.originalPrice && item.price != '' && item.price != null " class="oldPrice" :style="{'text-decoration': (item.price != item.originalPrice && item.price != null && item.price != '') ? 'line-through' : 'none'}">原价: ¥{{item.originalPrice}}</p>
                                            <p v-if="item.price == item.originalPrice || item.price == null || item.price == ''" class="oldPrice">现价: <span class="newPrice">¥{{item.originalPrice}}</span></p>
                                            <p v-if="bookingFlag == 1">库存: {{item.numberRemaining<0 ? 0 : item.numberRemaining}}</p>
                                        </div>
                                        <div class="menuNum" v-if="item.taste.length==1">
                                            <img src="../assets/img/icon_subtracting.png" alt="" class="NumSubtracting"
                                                 v-if="item.shoppingCartAmount>0" @click.stop="changeProductNum(item,-1)">
                                            <span v-if="item.shoppingCartAmount>0">{{item.shoppingCartAmount}}</span>
                                            <img v-if="item.numberRemaining>0  || bookingFlag == 0" src="../assets/img/icon_add.png" alt="" class="numAdd"
                                                 @click.stop="changeProductNum(item,1)">
                                            <span  v-if="item.numberRemaining<=0 && bookingFlag == 1" class="selguige1" @click.stop="changeProductNum(item,1)">已售完</span>
                                        </div>
                                        <div class="menuNum" v-else @click.stop="changeProductNum(item,1)">
                                            <span v-if="item.numberRemaining>0 || bookingFlag == 0" class="selguige">选规格</span>
                                            <span v-else-if="item.numberRemaining<=0 && bookingFlag == 1" class="selguige1">已售完</span>
                                            <span v-if="item.shoppingCartAmount>0" class="circlenum">{{item.shoppingCartAmount}}</span>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <div v-else-if="doBus && Me_nu.length == 0" class="closestore">
                    <div>门店暂无配置菜单~</div>
                </div>
                <!-- <div v-else class="closestore">
                    <img src="../assets/img/close.png">
                    <div>亲，当前门店尚未营业~</div>
                </div>  -->

                <!-- John modify -->
                <div v-show=" typeof(doBus) == 'boolean' && !doBus " class="closestore">
                    <img src="../assets/img/close.png">
                    <div>亲，当前门店尚未营业~</div>
                </div>                
                <!-- John modify -->
            </div>
        <div class="discountfoot" v-show="countfootflag && strategies.length>0">
            <span v-if="fullreduce!=false">已减{{fullreduce}}元，</span>{{strategyContent}}
        </div>
        <footer v-if="doBus">
            <span class="footCar" @click="showMenuDetail">
                <span class="footCarNum">{{totalNum}}</span>
            </span>
            <span class="footPrice">¥{{totalMoney}}</span>
            <span class="footChoose" @click="makeSure()" :style="{backgroundColor: (totalNum>0) ? '#fa5b4b' : '#999'}">选好了</span>
        </footer>
        <!--购物车-->
        <transition name="fade">
            <div class="mask" v-show="showMask" v-if="totalNum>0" @click="hidefootCart">
                <div class="menuDetail">
                    <p class="maskHead">
                        <span v-if="arraytj.length>0">
                            特价菜不参与优惠
                        </span>
                        <span v-else>
                            <span v-if="fullreduce!=false">已减{{fullreduce}}元，</span>{{strategyContent}}
                        </span>
                    </p>
                    <scroller lock-x ref="scroller_cart" height="13rem">
                        <ul class="maskcontent">
                            <li class="contentli" v-for="items in Me_nu">
                                <ul class="maskUl" v-for="item in items.packages" v-if="item.shoppingCartAmount>0 && item.samePackageFlag != 1">
                                    <li class="maskLI" v-for="_item in item.taste" v-if="_item.tasteAmount>0">
                                        <div class="item">
                                            <span>{{_item.packageName}}</span>
                                            <span>{{_item.tasteName}}</span>
                                        </div>
                                        <span class="item">{{_item.price}}</span>
                                        <div class="otherMenuNum">
                                            <img src="../assets/img/icon_subtracting.png" alt="" class="NumSubtracting"
                                                 @click.stop="changeProductNum(_item,-1,true)">
                                            <span>{{_item.tasteAmount}}</span>
                                            <img src="../assets/img/icon_add.png" alt="" class="numAdd"
                                                 @click.stop="changeProductNum(_item,1,true)">
                                        </div>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </scroller>
                </div>
            </div>
        </transition>
        <!--选择门店-->
        <transition name="slide-fade">
            <div class="chooseStore" v-show="chooseStore">
                <div class="chooseStDeal">
                    <p class="chooseHead">
                        <span @click="toSwitCity" class="toSwitCity">切换城市</span>
                        <span class="place">{{ switchCityName }}</span>
                        <span class="close" @click="chooseStoreStatus(false)"></span>
                    </p>
                    <scroller lock-x ref="scrollerstore" height="80%">
                        <div>
                            <ul>
                                <li v-for="(item,index) in selectInfo" :ststoreID="item.stStoreId" @click="selStore($event,index)">{{item.stStoreName}}</li>
                            </ul>
                        </div>
                    </scroller>
                </div>
            </div>
        </transition>
        <!--优惠-->
        <transition name="slide-fade">
            <div class="discount" v-show="discountflag" @click="closediscount">
                <div class="disdiv">
                    <div class="disStoreName">{{stStoreName}}</div>
                    <div class="disgoodsStar">
                        <div class="disstar">
                                <span v-for="i in 5">
                                    <span v-if="comprehensiveStar>(i-1)&&comprehensiveStar<(i-0.5)" class="star-item star1"></span>
                                    <span v-else-if="comprehensiveStar>=(i-0.5)&&comprehensiveStar<i" class="star-item star3"></span>
                                    <span v-else class="star-item" :class="{'re_yellow_star':(comprehensiveStar >= i),'m_star':(comprehensiveStar >= i)}"></span>
                                </span>
                        </div>
                        <span class="score">{{comprehensiveStar}}</span>
                    </div>
                    <div class="disInfo">
                        <span></span>
                        <span></span>
                        <div>优惠信息</div>
                    </div>
                    <ul>
                        <li v-for="item in strategies"><span class="delicon">减</span>{{item.strategyContent}}</li>
                        <li><span class="delicons">注</span> 特价菜不参与优惠</li>
                    </ul>
                </div>
            </div>
        </transition>
        <!--选择口味-->
        <transition name="slide-fade">
            <div class="chooseStore" v-show="showtaste" @click="closetaste">
                <div class="chooseStDeal">
                    <p class="chooseHead">
                        <!--<span class="toSwitCity"></span>-->
                        <span class="chooseTaste">{{taste_packageName}}</span>
                        <span class="close" @click="closetaste()"></span>
                    </p>
                    <div class="choosetaste">
                        <div>选择口味:</div>
                        <span  v-for="items in Me_nu">
                            <span  v-for="item in items.packages">
                                <span v-for="(i,index) in item.taste" v-if="item.menuId == taste_menuId && item.packageId == taste_packageId" class="tastespan"  :class="{selecttaste_active:tasteIndex== index}" :tasteId="i.tasteId" @click.stop="cTaste(i,index)">{{i.tasteName}}</span>
                            </span>
                        </span>
                    </div>
                    <div class="tasteadd">
                        <div class="tasteprice">￥{{taste_price}}</div>
                        <div class="tasteaddin" v-if="tasteAmount>0">
                            <img v-if="tasteAmount>0" src="../assets/img/icon_subtracting.png" alt="" @click.stop="changeProductNum(0,-1)">
                            <span v-if="tasteAmount>0">{{tasteAmount}}</span>
                            <img src="../assets/img/icon_add.png" alt="" @click.stop="changeProductNum(0,1)">
                        </div>
                        <div class="chooseit" @click.stop="changeProductNum(0,1,'选好了')" v-else>选好了</div>
                    </div>
                </div>
            </div>
        </transition>
        <alert v-model="show2" title="温馨提示" @on-hide="tisfn">找不到该门店，请重新选择</alert>
    </div>

</template>

<script>
    import {XHeader, Rater, Scroller, XSwitch, Group, Alert , AlertPlugin} from 'vux'

    import {MainMenuService,showStoreMenusDetail,showStoreList,orderCreate,showMenusService,shoppingCartService,clearCartService} from '../services/index'
    import BScroll from 'better-scroll'
    import {mapState, mapActions} from 'vuex'
    import Vue from 'vue'
    /**
     * John modify
     */
    Vue.use(AlertPlugin); 
    export default {
        components: {
            Alert,
            XHeader,
            Rater,
            Scroller,
            XSwitch,
            Group
        },
        updated(){

            this.$nextTick(() => {
                if(this.doBus){
                    this.$refs.scroller.reset();
                    this.$refs.scrollerstore.reset();
                    if(this.$refs.scroller_cart){
                        this.$refs.scroller_cart.reset();
                    }
                }
            })
        },
        filters:{

        },
        data(){
            return {
                foodmenuparam:"",
                stStorePhone:"",
                stStoreId: "",
                cityName:"广州",
                stStoreName:"",
                men_img:"",
                stStoreIntroduction: "",
                chooseStart: 0,
                value: false,
                showMask: false,
                dataDetail: {},
                totalMoney: 0,
                totalNum: 0,
                chooseStore: false,
                subPrice: 20,
                Me_nu: [],
                selectInfo:"",
                //传到评论页的data
                stInfo:"",
                packagefoodIdsArray:[], //加入购物车所有的产品id和数量存放的数组
                alldataDetail:[],
                selectmenuID:"",
                selectmenuName:"",
                fromFD:{},
                foodnum:"",  //每组菜单的数量,
                switchCityName:'',
                doBus:"",
                show2: false,
                listHeight:[],
                scrollY: 0,
                shoplist:[],
                orderparamlist:[], //生成订单参数列表
                stStoreCityName:'',
                showtaste:false,
                taste_menuId:"",
                taste_packageId:"",
                taste_price:"",
                tasteIndex:0,
                tasteAmount:0,
                taste_packageName:"",
                taste_price:"",
                strategies:[],
                comprehensiveStar:0,
                discountflag:false,
                countfootflag:false,
                strategyName:"",
                strategyId:"",
                strategyContent:"",
                reduce:"",
                fullreduce:"",
                arraytj:[],
                noredu:"",
                bookingFlag:"",
            }
        },

        methods: {
            ...mapActions([
                'updatefoodobj',
                'updateStoreId',
                'updateOrderId',
            ]),
            actsfn(){
                this.discountflag = true;
            },
            closediscount(){
                this.discountflag = false;
            },
            tisfn(){
                this.$router.push({
                    path: "/",
                    query: {

                    }
                })
            },
            closetaste(){
                this.showtaste=false;
                this.countfootflag = false;
            },
            // 点击购物车
            showMenuDetail(){
                //购物数量为0，购物数量为0，重置控制显示购物清单的状态为 false 并且 return
                if (this.totalNum == 0) {
                    this.showMask = false;
                    return;
                }
                let setStyle = document.getElementsByClassName("routerContent")[0];
                if(this.showMask){
                    this.showMask = false;
                    //提前隐藏避免页面有块东西闪现消失
                    if(this.arraytj.length>0){
                        this.countfootflag = false;
                    }else{
                        this.countfootflag = true;
                    }
                    setStyle.style.position = "absolute";
                }else {
                    this.showMask = true;
                    this.countfootflag = false;
                    setStyle.style.position = "fixed"
                }

                this.shopCartService();
            },
            shopCartService(){
                let splist =  JSON.stringify([...new Set(this.shoplist)]);
                let param = {
                    storeId: this.stStoreId,
                    packageIds:splist,
                };
                shoppingCartService().save(param).then((res)=> {
                    let dataobj = res.body;
                    if (dataobj && dataobj.code == 200) {
                        if(dataobj.data.menu.length>0){
                            this.arraytj = [];  // 有特价菜数组长度就会大于0
                            dataobj.data.menu.forEach((el)=>{
                                if(el.isSpecials == 1){
                                    this.arraytj.push("atf");
                                    this.totalMoney = localStorage.getItem("notreducepri");
                                }
                            })
                            this.noredu = "";
                            if(this.arraytj.length>0){
                                this.countfootflag = false;
                                this.noredu = false;
                            }else{
                                if(this.showMask){
                                    this.countfootflag = false;
                                }else {
                                    this.countfootflag = true;
                                }
                            }
                        }else{
                            this.countfootflag = false
                        }
                        this.$nextTick(() => {
                            if(this.$refs.scroller_cart){
                                this.$refs.scroller_cart.reset();
                            }
                        });
                    }
                })
            },
            closetaste(){
                this.showtaste = false;
            },
            cTaste(el,i){
                this.tasteIndex = i;
                this.tasteAmount = el.tasteAmount
            },
            //控制商品菜单的加减
            changeProductNum(item, type, isShopping){
                if(item==0){
                    //选择口味添加菜品
                    this.samepackage(item,type,isShopping);
                }else if(isShopping && isShopping == true){
                    //购物车添加菜品
                    this.samepackage(item,type,isShopping);
                }else{
                    if(item.numberRemaining==0 && this.bookingFlag == 1) return;
                    //菜品列表添加菜品
                    this.taste_menuId = "";
                    this.taste_packageId = "";
                    this.taste_price = "";
                    //判断口味>1就弹窗
                    if(item.taste && item.taste.length > 1){
                        //点击选口味存一份当前点击的数据，待会遍历判断找到这份菜数据
                        this.taste_menuId = item.menuId;
                        this.taste_packageId = item.packageId;
                        this.taste_price = item.price;
                        this.taste_packageName = item.packageName;
                        this.taste_price = item.price;
                        this.showtaste = true;
                        let tasteid = item.taste[0].tasteId;
                        item.taste.forEach((el,i)=>{
                            if(el.tasteId == tasteid){
                                this.cTaste(el,0)
                            }
                        })
                        return;
                    }
                    //购物数量为0，重置控制显示购物清单的状态为 false
                    if (this.totalNum == 0) this.showMask = false;
                    this.samepackage(item,type);

                }

            },
            //计算总价
            addTotalPrice: function () {
                // 重置
                this.totalMoney = 0;
                this.totalNum = 0;
                this.shoplist = [];
                //遍历计算总价
                this.Me_nu.forEach((value, index) => {
                    value.packages.forEach((val, i) => {
                        if (val.shoppingCartAmount > 0) {
                            val.taste.forEach((el)=>{
                                if(el.tasteAmount>0){
                                    //传给购物车接口
                                    let sl = {
                                        "packageId":el.packageId,
                                        "packageName":el.packageName,
                                        "amount" : el.tasteAmount,
                                        "menuId" : el.menuId,
                                        "menuName":el.menuName,
                                        "price" : el.price,
                                        "tasteId" : el.tasteId,
                                    }
                                    this.shoplist.push(sl);

                                    if(val.samePackageFlag && val.samePackageFlag == 1){return;}
                                    this.totalMoney += el.price * el.tasteAmount; //总价
                                    this.totalNum += el.tasteAmount; //数量
                                }

                            })
                        }
                    })
                })
                this.reduce = 0;
                localStorage.removeItem("fullreduceFlag");
                this.strategies.forEach((el)=>{
                    if(this.totalMoney >= el.fullBuy){
                        //超过需要减的优惠价格
                        this.reduce = el.reduce;
                        this.strategyName = el.strategyName;
                        this.strategyId = el.strategyId;
                        //缓存变量记录第一次满减的状态
                        localStorage.setItem("fullreduceFlag",1);
                        this.fullreduce = el.reduce;
                        this.strategyContent = el.strategyContent;
                    }else{
                        //没有超过也要取第一个
                        if(localStorage.getItem("strategyName") == null){
                            localStorage.setItem("strategyName",el.strategyContent);
                            this.strategyContent = localStorage.getItem("strategyName");
                            let fullreduceFlag = localStorage.getItem("fullreduceFlag");
                            if(fullreduceFlag == 1){return;}
                            this.fullreduce = false;
                            this.strategyId = "";
                        }
                    }
                })
                //点击完清空
                this.totalMoney = parseFloat(this.totalMoney).toFixed(2);
                localStorage.setItem("notreducepri",this.totalMoney);
                if(this.reduce){
                    this.totalMoney = this.totalMoney - this.reduce;
                    this.totalMoney = parseFloat(this.totalMoney).toFixed(2)
                }
                localStorage.removeItem("strategyName");
                localStorage.removeItem("reduce");
                this.shopCartService();

            },
            samepackage(item,type,isShopping){
                //选择口味弹窗添加菜品
                if(item==0 || isShopping&&isShopping=="选好了"){
                    let tasteid = document.getElementsByClassName("selecttaste_active")[0].getAttribute("tasteid");
                    this.Me_nu.forEach((value, index)=>{
                        value.packages.forEach((val, i) => {
                            if(val.price == this.taste_price &&  val.packageId == this.taste_packageId){
                                if (type < 0) {
                                    if (val.shoppingCartAmount > 0) {
                                        val.shoppingCartAmount--;
                                    } else {
                                        val.shoppingCartAmount = 0;
                                    }
                                } else {
                                    if(this.bookingFlag == 1){
                                        if(val.shoppingCartAmount < val.numberRemaining) {
                                            val.shoppingCartAmount++;
                                        }else{
                                            return;
                                        }
                                    }else {
                                        val.shoppingCartAmount++;
                                    }

                                }
                                val.taste.forEach((el,_i)=>{
                                    if(el.tasteId == tasteid){
                                        if (type < 0) {
                                            if (el.tasteAmount > 0) {
                                                el.tasteAmount--;
                                            } else {
                                                el.tasteAmount = 0;
                                            }
                                        } else {
                                            el.tasteAmount++;
                                        }
                                        this.tasteAmount = el.tasteAmount;
                                    }
                                })
                            }
                        })
                    })
                }else if(isShopping && isShopping == true){
                    //购物车添加菜品
                    this.Me_nu.forEach((value, index)=>{
                        value.packages.forEach((val, i) => {
                            if(val.price == item.price && val.packageId == item.packageId){
                                if (type < 0) {
                                    if (val.shoppingCartAmount > 0) {
                                        val.shoppingCartAmount--;
                                    } else {
                                        val.shoppingCartAmount = 0;
                                    }
                                } else {
                                    if(this.bookingFlag == 1){
                                        if(val.shoppingCartAmount < val.numberRemaining) {
                                            val.shoppingCartAmount++;
                                        }else{
                                            return;
                                        }
                                    }else {
                                        val.shoppingCartAmount++;
                                    }
                                }
                                val.taste.forEach((el,_i)=>{
                                    if(el.tasteId == item.tasteId){
                                        if (type < 0) {
                                            if (el.tasteAmount > 0) {
                                                el.tasteAmount--;
                                            } else {
                                                el.tasteAmount = 0;
                                            }
                                        } else {
                                            el.tasteAmount++;
                                        }
                                        this.tasteAmount = el.tasteAmount;
                                    }
                                })
                            }
                        })
                    })
                }else{
                    //samePackage 1相同套餐 0不相同
                    if(item.samePackage == 1){
                        this.Me_nu.forEach((value, index)=>{
                            value.packages.forEach((val, i) => {
                                if (val.packageId == item.packageId && item.price == val.price) {
                                    if (type < 0) {
                                        if (val.shoppingCartAmount > 0) {
                                            val.shoppingCartAmount--;
                                        } else {
                                            val.shoppingCartAmount = 0;
                                        }
                                    } else {
                                        if(this.bookingFlag == 1){
                                            if(val.shoppingCartAmount < val.numberRemaining) {
                                                val.shoppingCartAmount++;
                                            }else{
                                                return;
                                            }
                                        }else {
                                            val.shoppingCartAmount++;
                                        }
                                    }

                                    val.taste.forEach((el,_i)=>{
                                        if (type < 0) {
                                            if (el.tasteAmount > 0) {
                                                el.tasteAmount--;
                                            } else {
                                                el.tasteAmount = 0;
                                            }
                                        } else {
                                            el.tasteAmount++;
                                        }
                                        this.tasteAmount = el.tasteAmount;
                                    })
                                }
                            })
                        })
                    }else{
                        this.Me_nu.forEach((value, index)=>{
                            value.packages.forEach((val, i) => {
                                if(val.packageId == item.packageId && item.price == val.price){
                                    if (type < 0) {
                                        if (val.shoppingCartAmount > 0) {
                                            val.shoppingCartAmount--;
                                        } else {
                                            val.shoppingCartAmount = 0;
                                        }
                                    } else {
                                        if(this.bookingFlag == 1){
                                            if(val.shoppingCartAmount < val.numberRemaining) {
                                                val.shoppingCartAmount++;
                                            }else{
                                                return;
                                            }
                                        }else {
                                            val.shoppingCartAmount++;
                                        }
                                    }
                                    val.taste.forEach((el,_i)=>{
                                        if (type < 0) {
                                            if (el.tasteAmount > 0) {
                                                el.tasteAmount--;
                                            } else {
                                                el.tasteAmount = 0;
                                            }
                                        } else {
                                            el.tasteAmount++;
                                        }
                                        this.tasteAmount = el.tasteAmount;
                                    })
                                }
                            })
                        })
                    }
                }

                this.addTotalPrice();

            },
            //显示门店信息状态
            chooseStoreStatus(flag){
                this.switchCityName = this.stStoreCityName ||  this.nearStoreObj.cityName;
                this.cityName = this.switchCityName;
                this.chooseStore ? this.chooseStore = false : this.chooseStore = true;
                if(flag){
                    this.selectstore();
                }
            },

            _calculateHeight() {
                this.listHeight = [];
                if(!window.sessionStorage.getItem("liindex")){
                    this.scrollY = 0;
                    window.sessionStorage.removeItem("liindex")
                }
                if(!!!this.doBus || this.foodsScroll == null){
                    return;
                }
                let foodList = document.getElementsByClassName("food-list");
                let height = 0;
                this.listHeight.push(height);
                for (let i = 0; i < foodList.length; i++) {
                    let item = foodList[i];
                    height += item.clientHeight;
                    this.listHeight.push(height);
                }
                this.foodsScroll.refresh();
            },
            //选中菜单
            selectMenu(e,i){
                let foodList = document.getElementsByClassName("food-list");
                let el = foodList[i];
                this.foodsScroll.scrollToElement(el, 300);
            },

            toSwitCity(){
                this.strategies = [];
                this.$router.push({
                    path: 'switchCity',
                    query: {
                        cityName:this.cityName || this.nearStoreObj.cityName
                    }
                })
            },
            hidefootCart(){
                this.showMask = false;
                let setStyle = document.getElementsByClassName("routerContent")[0];
                setStyle.style.position = "absolute";
                this.shopCartService();
            },
            makeSure(){
                this.Createorder();
            },
            clearshop(){
                clearCartService().save({storeId:this.stStoreId}).then((res)=> {
                    let dataobj = res.body;
                    if (dataobj && dataobj.code == 200) {

                    }
                })
            },
            goviewcom(){
                let stocinfo = this.stStoreId;
                this.$router.push({
                    path: "view-comments",
                    query: {stStoreId:stocinfo}
                })
            },
            goStoreDetail(item){
                let liindex = document.getElementsByClassName("selectMenu_active")[0].getAttribute("liindex");
                window.sessionStorage.setItem("liindex",liindex);
                window.sessionStorage.setItem("numberRemaining",item.numberRemaining);
                let sl = {
                    "packageId":item.packageId,
                    "packageName":item.packageName,
                    "amount" : item.shoppingCartAmount,
                    "menuId" : item.menuId,
                    "menuName":item.menuName,
                    "price" : item.price
                }
                
                let param = {
                    stStoreId: this.stStoreId,
                    packageIds: JSON.stringify(sl),
                    foodli: JSON.stringify(this.Me_nu),
                }
                this.$router.push({
                    path: 'foodDetail',
                    query: param
                })
            },
            showMenus(){
                let mianparam1 = {
                    stStoreID:this.stStoreId,
                    isLunch:this.isLunch,
                    type:"",
                    dineWay:this.dineWay,
                    bookingTime:this.bookingTime
                };
                let mianparam2 = {
                    stStoreID:this.stStoreId,
                    isLunch:this.isLunch,
                    type:"2",
                    dineWay:this.dineWay,
                    bookingTime:this.bookingTime
                };
                let param = this.packageType == "2" ? mianparam2 : mianparam1;
                showMenusService().save(param).then((res)=>{
                    let dataobj = res.body;
                    if(dataobj.code == 400){
                        this.show2 = true;
                        return;
                    }
                    if(dataobj && dataobj.code == 200){
                        //营业时间的判断
                        this.bookingFlag = dataobj.data.bookingFlag;
                        this.strategies = dataobj.strategies;
                        this.comprehensiveStar = dataobj.data.comprehensiveStar;
                        //"doBussiness" : "true",//是否营业，true营业，false不营业
                        this.doBus = dataobj.data.doBussiness;　　
                        this.stStoreName = dataobj.data.stStoreName;
                        this.men_img = dataobj.data.stStoreImg;
                        this.stStoreIntroduction = dataobj.data.stStoreIntroduction;
                        this.stStorePhone = "tel:" + dataobj.data.stStorePhone;
                        this.stStoreId = dataobj.data.stStoreId;
                        this.stStoreCityName = dataobj.data.stStoreCityName;
                        this.Me_nu = dataobj.data.menu;
                        this.currentIndex = 2;
                        this.$nextTick(() => {
                            if(typeof this.foodsScroll!=="undefined"){
                                this._calculateHeight();
                                this.addTotalPrice();
                            }
                        });
                        this.$nextTick(() => {
                            if(this.foodsScroll){
                                return ;
                            }
                            this.foodsScroll = new BScroll(document.getElementById('wrapper'), {
                                click: true,
                                probeType: 3
                            })
                            this.foodsScroll.on('scroll', (pos) => {
                                this.scrollY = Math.abs(Math.round(pos.y));
                            });
                            this._calculateHeight();
                            this.addTotalPrice();
                        });
                    }else if(dataobj && dataobj.code == 440){
                        //不在营业时间内
                        this.bookingFlag = dataobj.data.bookingFlag;
                        this.countfootflag = false;
                        this.doBus = !!!dataobj.data.doBussiness;
                        this.strategies = dataobj.strategies;
                        this.comprehensiveStar = dataobj.data.comprehensiveStar;
                        this.stStoreName = dataobj.data.stStoreName;
                        this.men_img = dataobj.data.stStoreImg;
                        this.stStoreCityName = dataobj.data.stStoreCityName;
                        this.stStoreIntroduction = dataobj.data.stStoreIntroduction;
                        this.stStorePhone = "tel:" + dataobj.data.stStorePhone;
                        this.stStoreId = dataobj.data.stStoreId;
                        this.Me_nu = dataobj.data.menu;
                        this.$nextTick(() => {
                            if (typeof this.foodsScroll !== "undefined") {
                                this.foodsScroll = null;
                                this.scrollY = 0;
                            }
                        })
                    }else{
                        alert(res.body.msg)
                    }
                })
            },
            selectstore(){
                let param = {
                    cityName:this.cityName || this.nearStoreObj.cityName,
                    packageType: this.packageType + "",
                };


                this.switchCityName = this.cityName;
                showStoreList().save(param).then((res) => {
                    let dataobj = res.body;
                    // if(dataobj && dataobj.code == 200){
                    //     this.selectInfo = dataobj.data;
                    //     setTimeout(()=>{
                    //         this.$refs.scrollerstore.reset();
                    //         this.$refs.scrollerstore.reset({top: 0});
                    //     },30)

                    // }else{
                    //     alert(res.body.msg)
                    // }

                    /**
                     * John modify
                     */
                    if(dataobj && dataobj.code == 200){
                        this.selectInfo = dataobj.data;
                        setTimeout(()=>{
                            this.$refs.scrollerstore.reset();
                            this.$refs.scrollerstore.reset({top: 0});
                        },30)

                    }else if(dataobj.code == 400){
                        this.selectInfo = ''
                    }

                });
            },
            scroll_top(){
                if(!!!this.doBus || this.foodsScroll == null){
                    return;
                }
                let foodList = document.getElementsByClassName("food-list");
                let el = foodList[0];
                this.foodsScroll.scrollToElement(el, 300);
            },
            selStore(e,i){
                this.stStoreId = e.currentTarget.getAttribute("ststoreid");
                this.updateStoreId(this.stStoreId);
                this.strategies = [];
                window.localStorage.setItem("stStoreId",this.stStoreId);
                this.chooseStore = false;
                this.showMenus();
            },
            Createorder(){
                var tc_that = this; 

                this.orderparamlist = [];

                this.Me_nu.forEach((value, index) => {
                    value.packages.forEach((val, i) => {
                        if (val.shoppingCartAmount > 0) {
                            val.taste.forEach((el)=>{
                                if(el.tasteAmount>0){
                                    if(val.samePackageFlag && val.samePackageFlag == 1){return;}
                                    //传给购物车接口
                                    let sl = {
                                        packageId :el.packageId,
                                        amount : el.tasteAmount,
                                        menuId : el.menuId,
                                        tasteId : el.tasteId,
                                    }
                                    this.orderparamlist.push(sl)
                                }

                            })
                        }
                    })
                })

                let strategyid = (this.countfootflag==false && this.noredu===false) ? "" : this.strategyId;

                let param1 = {
                    packageIds:JSON.stringify(this.orderparamlist),
                    couponId:"111",
                    storeId: this.stStoreId,
                    price: this.totalMoney,
                    orderMethod:"1",
                    isPackage:this.isPackage,
                    dineWay:this.dineWay,
                    flag:1,
                    strategyId:strategyid,
                    orderingMethod:"1",
                };

                let param2 = {
                    packageIds:JSON.stringify(this.orderparamlist),
                    couponId:"111",
                    storeId: this.stStoreId,
                    price: this.totalMoney,
                    orderMethod:"1",
                    bookingTime:this.bookingTime,
                    isPackage:this.isPackage,
                    isLunch:this.isLunch,
                    dineWay:this.dineWay,
                    flag:1,
                    strategyId:strategyid,
                    orderingMethod:"1",
                };
           

                let param = this.dineWay == 1 ? param1 : param2;
                if(this.orderId){
                    param.orderId = this.orderId
                }else {
                    param.orderId = ""
                }
                if(this.totalNum>0){

                    orderCreate().save(param).then((res) => {
                        let dataobj = res.body;

                        // if(dataobj && dataobj.code == 200){
                        //     this.updateOrderId(dataobj.data.orderId);
                        //     this.$router.push({
                        //         path: "orderConfirm",
                        //         query: {
                        //             orderId:dataobj.data.orderId,
                        //             stStoreId:this.stStoreId
                        //         }
                        //     })
                        // }else{
                        //     alert(res.body.msg)
                        // }

                        /**
                         * John modify
                         */
                        if(dataobj && dataobj.code == 200){
                            this.updateOrderId(dataobj.data.orderId);
                            this.$router.push({
                                path: "orderConfirm",
                                query: {
                                    orderId:dataobj.data.orderId,
                                    stStoreId:this.stStoreId
                                }
                            })
                        }else if(dataobj && dataobj.code == 555){


                            var msg = dataobj.msg;    

                            tc_that.$vux.alert.show({
                                title : "温馨提示",
                                content : msg + "库存不足",
                                onShow (){

                                },
                                onHide (){
                                    tc_that.showMenus();
                                }
                            })
                        }else{
                            alert(res.body.msg)
                        }

                    });
                }
            },
        },

        mounted(){         
            // this.$nextTick(() => {
            //     this.stStoreId =window.localStorage.getItem('stStoreId') || this.stStoreId;
            // });
        },
//        deactivated (){
//            this.shopCartService();
//        },
        activated(){
            this.$nextTick(() => {
                this.stStoreId = window.localStorage.getItem('stStoreId') || this.stStoreId;
                if(this.$route.query && this.$route.query.stStoreId){
                    this.stStoreId = this.stStoreId || this.$route.query.stStoreId ;
                }
                this.showMenus();
            });
        },
        watch: {
            deep: true,
            immediate: true,
            dineWay(val, oldVal){
                this.clearshop();
                this.totalMoney = 0;
                this.totalNum = 0;
                this.shoplist =[];
                setTimeout(()=>{
                    this.foodsScroll.refresh()
                },500)
                this.scroll_top();
            },
            isLunch(val, oldVal){
                this.clearshop();
                this.totalMoney = 0;
                this.totalNum = 0;
                this.shoplist =[];
                setTimeout(()=>{
                    this.foodsScroll.refresh()
                },500)
                this.scroll_top();
            },
            bookingTime(val, oldVal){
                this.clearshop();
                this.totalMoney = 0;
                this.totalNum = 0;
                this.shoplist =[];
                setTimeout(()=>{
                    this.foodsScroll.refresh()
                },500)
                this.scroll_top();
            },
            packageType(val, oldVal){
                this.clearshop();
                this.totalMoney = 0;
                this.totalNum = 0;
                this.shoplist =[];
                setTimeout(()=>{
                    this.foodsScroll.refresh()
                },500)
                this.scroll_top();
            },
            switchCityObj(val, oldVal){
                this.cityName = this.switchCityObj.cityName;
                this.switchCityName = this.switchCityObj.cityName;
                this.selectstore();
            },
            stStoreId(val, oldVal){
                this.stStoreId = val;
            },

        },
        created(){
            this.stStoreId = this.stStoreId || window.localStorage.getItem('stStoreId');

        },
        computed: {
            ...mapState({
                isPackage:state => state.order.isPackage,
                isLunch:state => state.order.isLunch,
                bookingTime:state => state.order.bookingTime,
                foodobj:state => state.xstInfo.foodobj,
                packageType:state => state.order.packageType,
                nearStoreObj: state => state.switchCity.nearStoreObj,
                switchCityObj: state => state.switchCity.switchCityObj,
                stStoreId:state => state.switchCity.stStoreId,
                orderId:state => state.order.orderId,
            }),
            dineWay(){
                return window.localStorage.getItem("DINE_WAY");
            },
            // currentIndex() {
            //     if(!!!this.doBus){
            //         return;
            //     }
            //     for (let i = 0; i < this.listHeight.length; i++) {
            //         let height1 = this.listHeight[i];
            //         let height2 = this.listHeight[i + 1];
            //         if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
            //             return i;
            //         }
            //     }
            //     return 0;
            // },
        },


    }
</script>


<style lang="less" rel="stylesheet/less">
    #xstore-page {
        li{
            list-style: none;
        }
        nav {
            font-size: .75rem;
            color: #fff;
            width: 100%;
            height: 2rem;
            line-height: 2rem;
            background: #fc8672;
            span {
                width: 32%;
                display: inline-block;
                text-align: center;
            }
            span:first-child {
                background: url(../assets/img/icon_back.png) no-repeat .5rem center;
                background-size: .8rem 1rem;
                text-align: left;
                padding-left: 1.5rem;
            }
            span:nth-child(3) {
                text-align: right;
                background: url(../assets/img/icon_triangle.png) no-repeat 90% 55%;
                padding-right: 1.4rem;
                background-size: .5rem .375rem;
            }
        }
        .chooseTaste{
            font-size: .7rem;
            width: 80%;
            height: 2.2rem;
            line-height: 2.2rem;
            text-align: center;
            display: inline-block;
            background-size: .75rem 1rem;
            padding-left: 20%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .storeDetail {
            width: 100%;
            background: #f6f6f6;
            position: absolute;
            top: 2rem;
            bottom: 2.5rem;
            .stHeadImg {
                position: absolute;
                width: 4rem;
                height: 4rem;
                left: .9rem;
                top: 1rem;
            }
            .storeHead {
                width: 100%;
                overflow: hidden;
                background: #fff;
                padding-left: 6rem;
                position: relative;
                height: 7.8rem;
                .delprice{
                    padding: 10px 10px 10px .9rem;
                    font-size: .6rem;
                    width: 70%;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .activitynum{
                    padding: 10px .5rem 10px 10px;
                    font-size: .6rem;
                    width: 30%;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    text-align: right;

                }
            }
            .stRight {
                width: 100%;
                height: 100%;
                padding: 1rem .5rem 1rem 0;
                .name {
                    div:nth-child(1) {
                        color: #fff;
                        width: 1.8rem;
                        text-align: center;
                        height: 1rem;
                        line-height: 1rem;
                        font-size: .5rem;
                        background: #fa5a4c;
                        display: inline-block;
                        float: left;
                    }
                    div:nth-child(2){
                        font-size: .5rem;
                        color: #fff;
                        display:table-cell;
                        vertical-align:middle;
                    }
                    div:nth-child(3){
                        font-size: .85rem;
                        margin-left: 1rem;
                        display: table-cell;
                        vertical-align: middle;
                        height: 1rem;
                        line-height: 1rem;
                    }
                }
                .stDesc {
                    width: 12rem;
                    font-size: .6rem;
                    padding-left: 1rem;
                    margin-top: 0.5rem;
                    background: url(../assets/img/icon_present.png) no-repeat left top;
                    background-size: .75rem .75rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    word-break: break-word;
                }
                .stTel {
                    width: 5rem;
                    height: 1.4rem;
                    line-height: 1.4rem;
                    text-align: center;
                    display: inline-block;
                    text-decoration: none;
                    color: #fff;
                    font-size: .6rem;
                    border-radius: .3rem;
                    padding-left: .7rem;
                    background: #fa5a4c url(../assets/img/icon_tel.png) no-repeat .5rem center;
                    background-size: .75rem .75rem;
                    margin-top: .5rem;
                    float: right;
                }
            }
        }
        .selectMenu{
            float: left;
            width:22%;
            font-size: 0.8rem;
            background: #f6f6f6;
            position: absolute;
            top:0;
            bottom: 0;
            ul{
                li{
                    width: 100%;
                    border-bottom: 1px dashed #ccc;
                    padding: 1rem .4rem 1rem .4rem;
                    font-size: 0.7rem;
                }
                li.selectMenu_active{
                    border-top:none;
                }
            }

        }
        .stMenu {
            width:78%;
            background: #fff;
            padding: 0rem .3rem;
            position: absolute;
            top: 0;
            left: 22%;
            bottom: 0;
            color:#333;
            .menuHead {
                font-size: .8rem;
                width: 100%;
                height: 2rem;
                line-height: 2rem;
                border-bottom: 1px solid #dfdfdf;
            }
            .foodul {
                li {
                    list-style: none;
                    width: 100%;
                    overflow: hidden;
                    background: #fff;
                    position: relative;
                    border-bottom: 1px solid #eee;
                    padding: 1rem 0;
                    .menuImg {
                        float: left;
                        height: 70px;
                        width: 80px;
                    }
                    .menuRight {
                        height: 100%;
                        float: left;
                        padding-left: .5rem;
                        font-size: .8rem;
                        p {
                            margin-top: .2rem;
                            font-size: 0.6rem;
                        }
                        p:first-child {
                            font-size: 0.8rem;
                            margin-top: 0;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            width: 8rem;
                        }
                        p:nth-child(2) {
                            .newPrice {
                                color: #fa5a4c;
                            }

                        }
                        .oldPrice {

                        }
                    }

                    .menuNum {
                        height: 1.3rem;
                        position: absolute;
                        right: .2rem;
                        bottom: 45%;
                        padding: 0 0 5px 5px;
                        .selguige{
                            background: #fa5b4b;
                            color: #fff;
                            font-size: .5rem;
                            padding: 5px;
                            border-radius: 15px;
                        }
                        .selguige1{
                            background: #a2a2a2;
                            color: #fff;
                            font-size: .5rem;
                            padding: 5px;
                            border-radius: 15px;
                        }
                        .circlenum{
                            width: 15px;
                            height: 15px;
                            background: red;
                            color: #fff;
                            line-height: 15px;
                            text-align: center;
                            padding: 0;
                            border-radius: 50%;
                            position: absolute;
                            top: -8px;
                            right: 0;
                            font-size: .5rem;
                        }
                        span {
                            font-size: .8rem;
                            display: inline-block;
                            vertical-align: top;
                            padding: 5px 0;
                        }
                        img {
                            width: 1.6rem;
                            height: 1.6rem;
                            display: inline-block;
                            vertical-align: top;
                            padding: 5px;
                        }
                    }
                }
            }
        }
        .discountfoot{
            width: 100%;
            height: 1.2rem;
            line-height: 1.2rem;
            background: #fce0db;
            position: fixed;
            bottom: 2.5rem;
            left: 0;
            z-index: 1000;
            text-align: center;
            font-size: .6rem;
            color: #666;
        }
        footer {
            width: 100%;
            height: 2.5rem;
            background: #fff;
            position: fixed;
            bottom: 0;
            left: 0;
            border-top: 1px solid #dadada;
            z-index: 1000;
            .footCar {
                width: 2rem;
                height: 2rem;
                background: #fc8672 url(../assets/img/icon_car.png) no-repeat center center;
                background-size: 1.2rem 1.2rem;
                display: inline-block;
                border-radius: 50%;
                position: absolute;
                left: 1rem;
                top: -10%;
                .footCarNum {
                    width: 1rem;
                    height: 1rem;
                    line-height: 1rem;
                    display: inline-block;
                    background: #fa5b4b;
                    border-radius: 50%;
                    font-size: .6rem;
                    color: #fff;
                    text-align: center;
                    position: absolute;
                    right: -.2rem;
                    top: -.3rem;

                }
            }
            .footPrice {
                margin-left: 3.5rem;
                color: #fc8672;
                height: 2.5rem;
                line-height: 2.5rem;
            }
            .footChoose {
                width: 5.5rem;
                height: 2.5rem;
                line-height: 2.5rem;
                background: #fa5b4b;
                display: inline-block;
                float: right;
                text-align: center;
                color: #fff;
                font-size: 1rem;
            }
        }
        .delicon{
            background-color: red;
            color: #fff;
            display: inline-block;
            margin-right: .3rem;
            width: .8rem;
            height: .8rem;
            text-align: center;
            line-height: .8rem;
            border-radius: .2rem;
        }
        .delicons{
            background-color: #e39600;
            color: #fff;
            display: inline-block;
            margin-right: .3rem;
            width: .8rem;
            height: .8rem;
            text-align: center;
            line-height: .8rem;
            border-radius: .2rem;
        }
    }

    .mask {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
        z-index: 999;
        position: fixed;
        top: 0;
        left: 0;
        .menuDetail {
            position: fixed;
            left: 0;
            bottom: 2.5rem;
            font-size: .8rem;
            background: #fff;
            width: 100%;
            .maskHead {
                width: 100%;
                height: 1.5rem;
                line-height: 1.5rem;
                background: #fce0db;
                text-align: center;
                span {
                    color: #fa5b4b;
                }
            }
            .maskcontent{
                padding: 10px 0 ;
                .maskUl {
                    padding: 0 .5rem;
                    .maskLI {
                        overflow: hidden;
                        padding: 10px 0;
                        list-style: none;
                        .item{
                            display: inline-block;
                            span{
                                display: block;
                            }
                            span:nth-child(2) {
                                font-size: .5rem;
                                color: #999;
                            }
                        }
                        .item:nth-child(1) {
                            width: 58%;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            float: left;
                        }
                        .item:nth-child(2) {
                            width: 15%;
                            text-align: center;
                            float: left;
                            height: 1.8rem;
                            line-height: 1.8rem;
                        }
                        .otherMenuNum {
                            display: inline-block;
                            float: right;
                            width: 24%;
                            text-align: right;
                            span {
                                font-size: .8rem;
                                display: inline-block;
                                vertical-align: top;
                                line-height: 1.8rem;
                            }
                            img {
                                width: 1.2rem;
                                height: 1.2rem;
                                display: inline-block;
                                margin-top: 0.3rem;
                            }
                        }

                    }
                }
            }


        }
    }
    .discount{
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1001;
        .disdiv{
            border-radius: .2rem;
            position: absolute;
            top: 50%;
            left: 10%;
            height: 50%;
            width: 80%;
            background-color: #fff;
            text-align: center;
            transform: translateY(-50%);
            .disStoreName{
                margin-top: 2rem;
            }
            .disgoodsStar{
                margin-top: .5rem;
            }
            .disInfo{
                position: relative;
                padding-top: 1rem;
                span{
                    height: 1px;
                    width: 4rem;
                    overflow: hidden;
                    background: #dfdfdf;
                    display: inline-block;
                    position: absolute;
                    top: 1.5rem;
                }
                span:nth-child(1){
                    left: 1rem;
                }
                span:nth-child(2){
                    right: 1rem;
                }
                div{
                    display: inline-block;
                    font-size: .8rem;
                }
            }
            .disstar{
                display: inline-block;
                vertical-align: top;
                margin-left: 6px;
                .star-item {
                    background: url(../assets/img/m_star.png) no-repeat center center;
                    width: 15px;
                    height: 15px;
                    margin-right: 6px;
                    background-size: 15px 15px;
                    display: inline-block;
                }
                .star-item.star1{
                    background: url(../assets/img/star1.png) no-repeat center center;
                    background-size: 15px 15px;
                }
                .star-item.star3{
                    background: url(../assets/img/star3.png) no-repeat center center;
                    background-size: 15px 15px;
                }
                .m_star{
                    background: url(../assets/img/m_star.png) no-repeat center center;
                    background-size: 15px 15px;
                }
                .re_yellow_star{
                    background: url(../assets/img/re_yellow_star.png) no-repeat center center;
                    background-size: 15px 15px;
                }
            }
            ul{
                margin-top: 1rem;
                li{
                    margin-top: .6rem;
                    text-align: left;
                    padding-left: 1rem;
                    font-size: .5rem;
                }
            }

        }
    }
    .chooseStore {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1001;

        .chooseStDeal {
            width: 80%;
            height: 13rem;
            position: absolute;
            top: 50%;
            left: 10%;
            margin-top: -6.5rem;
            background: #fff;
            border-radius: .2rem;
            .chooseHead {
                border-bottom: 1px solid #fa5b4b;
                height: 2.2rem;
                .toSwitCity {
                    font-size: .6rem;
                    width: 29%;
                    height: 2.2rem;
                    line-height: 2.2rem;
                    display: inline-block;
                    text-align: center;
                    color: #999;
                    float: left;
                }
                .place {
                    font-size: .8rem;
                    width: 30%;
                    height: 2.2rem;
                    line-height: 2.2rem;
                    text-align: center;
                    display: inline-block;
                    padding-left: 1.2rem;
                    background: url(../assets/img/icon_place.png) no-repeat .2rem center;
                    background-size: .75rem 1rem;
                    margin-left: 1rem;

                }
                .taste{
                    font-size: .8rem;
                    width: 30%;
                    height: 2.2rem;
                    line-height: 2.2rem;
                    text-align: center;
                    display: inline-block;
                    background-size: .75rem 1rem;
                    margin-left: 1rem;
                }
                .close {
                    width: 20%;
                    height: 100%;
                    float: right;
                    display: inline-block;
                    background: url(../assets/img/icon_delect.png) no-repeat 80% center;
                    background-size: .8rem .8rem;
                }
            }
            .choosetaste{
                padding: 15px;
                overflow: hidden;
                height: 8rem;
                div{
                    margin-bottom: 10px;
                    font-size: .8rem;
                }
                .tastespan{
                    border:1px solid #fa5b4b;
                    border-radius: 4px;
                    padding: 5px 10px;
                    margin: 0 8px 8px 0;
                    float: left;
                    font-size: .6rem;
                }
                .selecttaste_active{
                    background-color: #fa5b4b;
                    color: #ffffff;
                }
            }
            .tasteadd{
                position: relative;
                background: #eee;
                height: 2.8rem;
                border-radius: .2rem;
                .tasteprice{
                    position: absolute;
                    top:50%;
                    transform: translateY(-50%);
                    left:1rem;
                    color: #fa5b4b;
                }
                .tasteaddin{
                    position: absolute;
                    bottom: 10px;
                    right: 15px;
                    img{
                        width: 20px;
                        height: 20px;
                    }
                    span{
                        vertical-align: top;
                        line-height: 1;
                    }
                }
                .chooseit{
                    padding: 6px 10px;
                    background: #fa5b4b;
                    border-radius: .2rem;
                    position: absolute;
                    right: 1rem;
                    top: 50%;
                    transform: translateY(-50%);
                    color: #fff;
                }
            }
            ul {
                padding: 0 .5rem;
                li {
                    text-align: center;
                    height: 2.2rem;
                    width: 100%;
                    line-height: 2.2rem;
                    font-size: .8rem;
                    font-weight: 400;
                    border-bottom: 1px solid #eee;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }

        }
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s
    }

    .fade-enter, .fade-leave-active {
        opacity: 0
    }

    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .3s ease;
    }

    .slide-fade-leave-active {
        transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-active {
        transform: translateX(10px);
        opacity: 0;
    }

    /*购物车上浮*/
    .slideUp-fade-leave-active {
        transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slideUp-fade-enter, .slideUp-fade-leave-active {
        transform: translateY(10px);
        height: 0;
    }

    .selectMenu_active{
        background-color: #fff;
        border-left: 2px solid #fa5a4c;
        border-right: 1px solid #eee;
        border-top: 1px solid #eee;
        box-sizing: border-box;
        border-bottom: none !important;
    }
    #vux-scroller-mkzmf{
        background-color: #f6f6f6;
    }
    .routerContent{
        overflow: hidden;
        background: #f5f5f5;
    }
    .menuBox{
        overflow: hidden;
        position: absolute;
        width: 100%;
        bottom: 0;
        top: 6.8rem;
        border-top: 1px solid #eee;
    }
    .menubox{
        top: 7.8rem;
    }
    .closestore{
        text-align: center;
        margin-top: 5rem;
        img{
            width: 5rem;
        }
        div{
            font-size: 0.7rem;
            margin-top: 1.5rem;
            color: #999;
        }
    }
</style>
